<template>
	<div v-show="modalShow">
		<div class="modal-box">
			<div class="modalInfo-box">
				<div class="close-box">
					<image src="@/static/img/close.png" mode="aspectFill" class="close-img" @tap="close"></image>
				</div>
				
				<div class="title-box">
					<span class="title-one">解锁展位</span>
					<span class="title-two">解锁一个展位需消耗一个九灵钥匙</span>
				</div>
				
				<div class="need-box">
					<image src="@/static/img/jiulingKey.png" mode="aspectFill" class="key-img"></image>
					<div class="need-right">
						<span class="jiu-font48-fff" style="font-size: 4.27vw;">九灵钥匙</span>
						<span class="have-num">拥有数：{{ user.myWallet.jiulingCoins }}个</span>
						<div class="get-box">
							<span class="get-btn">去获得</span>
						</div>
					</div>
				</div>
				
				<div class="btn-box">
					<span class="btn" @tap="unlockOne(1)">解锁1个展位</span>
					<span class="btn" @tap="unlockOne('all')">解锁全部展位</span>
					<span class="back-text" @tap="close">返回</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		props: {
			pavilionId:{
				type: Number,
				default: 0
			}
		},
		data(){
			return{
				modalShow: false,
				
			}
		},
		methods:{
			close() {
				this.modalShow = false;
			},
			open(){
				this.modalShow = true;
			},
			async unlockOne(index){
				let data = {
					pavilionId: this.pavilionId
				};
				if(index == 1) data["amount"] = 1;
				else if(index == 'all') data["amount"] = this.user.myWallet.jiulingCoins;
				this.$u.api.onCollectionUnlock({} ,data).then(res=>{
					this.$store.dispatch('user/myWallet');
					this.$emit('unlockSuccess');
					this.modalShow = false;
				}).catch(err=>{
					uni.showToast({
						icon:'none',
						title: err.msg
					})
					this.modalShow = false;
				})
			}
		},
		mounted() {
			this.$store.dispatch('user/myWallet')
		}
	}
</script>

<style lang="scss">
	.modal-box{
		background-color: rgba(0, 0, 0, 0.6);
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		padding: 0 8.53vw;
		
		.modalInfo-box{
			z-index: 9999999;
			background-color: #1b1b1b;
			border-radius: 7.5vw;
			padding: 4.27vw 4.27vw 6.67vw 4.27vw;
			width: 100%;
			
			.close-box{
				width: 100%;
				text-align: end;
				.close-img{
					width: 6.4vw;
					height: 6.4vw;
				}
			}
		
			.title-box{
				display: flex;
				text-align: center;
				flex-direction: column;
				
				.title-one{
					font-size: 6.4vw;
					font-weight: 500;
					color: #fff;
				}
				
				.title-two{
					font-size: 3.2vw;
					font-weight: 300;
					color: #FFCE80;
				}
			}
		
			.need-box{
				margin-top: 7.5vw;
				border-radius: 4.27vw;
				background-color: #000;
				padding: 2.5vw;
				display: flex;
				width: 100%;
				
				.key-img{
					width: 28.8vw;
					height: 28.8vw;
					border-radius: 5vw;
					margin-right: 2.5vw;
					flex-shrink: 0;
				}
				
				.need-right{
					margin-top: 2.5vw;
					display: flex;
					flex-direction: column;
					width: 100%;
					
					.have-num{
						font-size: 3.2vw;
						font-weight: 300;
						color: #A972FF;
					}
					
					.get-box{
						flex: 1;
						display: flex;
						align-items: flex-end;
						justify-content: end;
						width: 100%;
						
						.get-btn{
							box-shadow: 0vw 1vw 2vw rgba(71,12,114,0.48);
							background-color: #A972FF;
							border-radius: 5.33vw;
							width: 17.07vw;
							line-height: 8.53vw;
							text-align: center;
							font-size: 3.2vw;
							font-weight: 500;
							color: #000;
						}
					}
				}
			}
		
			.btn-box{
				margin-top: 5vw;
				display: flex;
				flex-direction: column;
				text-align: center;
				.btn{
					margin-top: 2.13vw;
					border-radius: 5.33vw;
					width: 100%;
					line-height: 12.8vw;
					text-align: center;
					background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
					box-shadow: 0vw 3vw 6vw rgba(71,12,114,0.48);
					font-size: 3.73vw;
					font-weight: 500;
					color: #000;
				}
				.back-text{
					margin-top: 3.2vw;
					font-size: 3.2vw;
					font-weight: 300;
					color: #555;
				}
			}
		}
	}
</style>